<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">昵称：</span>
                <el-input placeholder="输入会员昵称" v-model.trim="user_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">UID：</span>
                <el-input placeholder="输入会员UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">手机号：</span>
                <el-input placeholder="输入手机号" v-model.trim="tel" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" clearable></el-input>
            </div>

            <div class="task-one__btn">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane :label="`${item.label}(${item.nums})`" :name="item.name" v-for="item in tabarr" :key="item.name">
                <el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column label="会员" min-width="200">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-round img-mini"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.face + '!img_400'"
                                    fit="cover"
                                    v-if="row.face"
                                />
                                <div class="table-lr__right mini-right">
                                    <p class="lr-title line-one">{{ row.nickname }}</p>
                                    <p class="lr-text line-one">UID：{{ row.uid }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
                    <el-table-column prop="industry" label="行业" min-width="140"></el-table-column>
                    <el-table-column prop="job_title" label="职位" min-width="120"></el-table-column>
                    <el-table-column prop="exam_level" label="审核等级" min-width="120">
                        <template #default="{ row }">
                            <p>三级代理商</p>
                            <!-- <p v-if="row.agent_level == 1">一级代理商</p>
                            <p v-else>{{ row.agent_level == 2 ? "二级代理商" : "三级代理商" }}</p> -->
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" width="240">
                        <template #default="{ row }">
                            <p>申请时间：{{ row.created_at_label }}</p>
                            <p v-if="row.verify_time_label">审核时间：{{ row.verify_time_label }}</p>
                            <detail-item
                                title="审核备注："
                                title-align="left"
                                title-width="70px"
                                :value="row.refuse"
                                value-color="#646566"
                                bottom="0"
                                v-if="row.verify == 2 && row.refuse"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column prop="intro" label="备注" min-width="170"></el-table-column>
                    <el-table-column label="推荐人" min-width="100">
                        <template #default="{ row }">
                            <div v-if="row.invite">
                                <div class="table-lr__right" style="min-height: 50px">
                                    <p class="lr-user line-one">{{ row.invite.nickname }}</p>
                                    <p class="lr-text line-one">UID：{{ row.invite.uid }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="110" class-name="operation-nav" fixed="right" v-if="item.name == 0">
                        <template #default="{ row }">
                            <el-button class="theme-btn" link type="primary" @click="clickExamine(row)"> 审核 </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                    background
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeNum"
                    :total="totalNums"
                    layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
            </el-tab-pane>
        </el-tabs>

        <el-dialog v-model="dialogExamine" title="代理商审核" width="600px" :append-to-body="true" :destroy-on-close="true" @close="closeExamine">
            <el-form ref="ruleExamineRef" :model="ruleExamineForm" :rules="ruleCheckExamine" label-width="120px">
                <el-form-item label="代理商昵称">
                    <div>{{ ruleExamineForm.nickname }}</div>
                </el-form-item>
                <el-form-item label="审核等级">
                    <p v-if="ruleExamineForm.exam_level == 1">一级代理商</p>
                    <p v-else>{{ ruleExamineForm.exam_level == 2 ? "二级代理商" : "三级代理商" }}</p>
                </el-form-item>
                <el-form-item label="审核结果" prop="radius_type">
                    <el-radio-group v-model="ruleExamineForm.radius_type">
                        <el-radio label="1">通过</el-radio>
                        <el-radio label="2">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="拒绝原因" prop="reason">
                    <el-input v-model.trim="ruleExamineForm.reason" type="textarea" clearable :rows="4" placeholder="请输入拒绝原因(不通过时必填)" />
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitExamineForm(ruleExamineRef)"> 确认审核 </el-button>
                        <el-button @click="resetExamineForm(ruleExamineRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, watch } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getCount()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, search_btn, loading, arr_data, totalNums, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        action: "index",
        uid: user_id.value,
        so: user_name.value,
        mobile: tel.value,
        type: status.value, // [0:全部,1:待审核,2:已通过,3:已拒绝]
    }
    getdata("agent/verify/index", params)
}
function getCount() {
    proxy.$axios
        .get("agent/verify/index", {
            params: {
                action: "tongji",
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                tabarr.value[0].nums = result.wait_count
                tabarr.value[1].nums = result.succeed_count
                tabarr.value[2].nums = result.refuse_count
                pubRefreshParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 搜索
 * @param {String} user_name 昵称
 * @param {String} user_id 会员ID
 * @param {String} tel 手机号
 */
const user_name = ref("")
const user_id = ref("")
const tel = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * tab切换
 * @param {String} status tab切换的类型值
 * @param {String} tabName 当前index
 * @param {Array} tabarr 数组
 */
const status = ref("1")
const tabName = ref("0")
const tabarr = ref([
    {
        label: "待审核",
        name: "0",
        status: "1",
        nums: 0,
    },
    {
        label: "审核通过",
        name: "1",
        status: "2",
        nums: 0,
    },
    {
        label: "审核拒绝",
        name: "2",
        status: "3",
        nums: 0,
    },
])
const handleTab = (pane) => {
    status.value = tabarr.value[pane.index].status
    pubRefreshParams(getList)
}

/**
 * 审核
 * @param {Boolean} dialogExamine 弹窗显示状态
 * @param {Boolean} form_loading 提交按钮状态
 * @param {Array} ruleExamineRef 表单规则
 * @param {Object} ruleExamineForm  表单字段
 * @param {Object} ruleCheckExamine  表单提示
 * @param {Function} submitExamineForm 提交表单
 */
const dialogExamine = ref(false)
const form_loading = ref(false)
const ruleExamineRef = ref(null)
const ruleExamineForm = reactive({
    id: "",
    nickname: "",
    exam_level: "",
    radius_type: "1",
    reason: "",
})
const ruleCheckExamine = reactive({
    radius_type: [{ required: true, message: "请选择审核结果", trigger: "change" }],
})
const submitExamineForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleExamineForm.radius_type == "2" && ruleExamineForm.reason == "") {
                proxy.$message({ message: "请填写拒绝原因", type: "warning" })
                return
            }
            form_loading.value = true
            let data = {
                verify_id: ruleExamineForm.id,
                verify: ruleExamineForm.radius_type,
                refuse: ruleExamineForm.reason,
            }
            proxy.$axios
                .post("agent/verify", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogExamine.value = false
                        proxy.$message({ message: "审核成功！", type: "success" })
                        getCount()
                    } else {
                        proxy.$message({ message: res.data.msg, type: "error" })
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetExamineForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const closeExamine = () => {
    dialogExamine.value = false
    resetExamineForm(ruleExamineRef.value)
}

const clickExamine = (row) => {
    ruleExamineForm.id = row.verify_id
    ruleExamineForm.nickname = row.nickname
    ruleExamineForm.exam_level = row.agent_level
    ruleExamineForm.reason = row.refuse
    dialogExamine.value = true
}
</script>

<script>
export default {
    name: "AgentExam",
}
</script>

<style lang="less" scoped>
.table-mb {
    :deep(.detail-item__left) {
        margin-right: 0;
    }
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
